<template>
  <div class="layout-container test-sample-data-dialog">
    <el-tabs
      :tab-position="tabPosition"
      class="demo-tabs"
      v-model="activeName"
      @tab-change="onHandleClick"
    >
      <el-tab-pane label="试验场景说明描述项-处理" name="first">
        <TestSceneDescriptTab
          :interferType="interferType"
          :dealDataBeforeSources="dealDataBeforeSources"
          :dealDataAfterSources="dealDataAfterSources"
        />
        <!-- 试验场景说明描述项 -->
      </el-tab-pane>
      <el-tab-pane label="战技信息描述项" name="second">
        <TactInfoDescriptTab
          :interferType="interferType"
          :dealDataBeforeSources="dealDataBeforeSources"
          :dealDataAfterSources="dealDataAfterSources"
        />
      </el-tab-pane>
    </el-tabs>

    <div class="buttons-group common-buttons">
      <el-button type="primary" @click="onConfireAdd" v-if="!pageTypeDisabled"
        >确认添加</el-button
      >
      <el-button type="primary" @click="onBack">返回</el-button>
    </div>

    <!-- <span class="base-info-button" @click="onBaseInfo">基础信息</span> -->

    <!-- <BaseInfoForm
        v-if="visible"
        ref="baseInfoRef"
        @onInterferTypeValue="onInterferTypeValue"
        :onClose="onClose"
        :sampleBaseInfoVO="baseInfo"
      /> -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, provide, reactive, ref } from "vue";
import { TabsInstance, ElMessage } from "element-plus";
import TestSceneDescriptTab from "./TestSceneExplainDescriptItem/index.vue";
import TactInfoDescriptTab from "./TactInfoDescriptItem/index.vue";
// import BaseInfoForm from './BaseInfoForm/index.vue';
import { useRoute, useRouter } from "vue-router";
import { httpDealData, getSampleDataInfo } from "@/api/testSampleData";

let $router = useRouter();
let route = useRoute();
const pageTypeDisabled = route.query.pageType === "dealLook" ? true : false;

const tabPosition = ref<TabsInstance["tabPosition"]>("left");
const activeName = ref<string>("first");
const visible = ref<boolean>(false);
const baseInfoRef = ref();
// 干扰类型默认为: 舰载有源干扰
const interferType = ref<string>("舰载有源干扰-雷达");
const dealDataBeforeSources = ref<Object>({});
const dealDataAfterSources = ref<Object>({});
const baseInfo = ref<Object>({});
onMounted(() => {
  interferType.value = route.query.interType;
  dealDataBefore();
  dealDataAfter();
});

// 调用处理数据前的数据接口
const dealDataBefore = () => {
  getSampleDataInfo({ sampleId: route.query.dealBeforeId }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      dealDataBeforeSources.value = data;
      baseInfo.value = data.sampleBaseInfoVO;
    }
  });
};

// 调用处理数据后的数据接口
const dealDataAfter = () => {
  getSampleDataInfo({ sampleId: route.query.dealAfterId }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      dealDataAfterSources.value = data;
      baseInfo.value = data.sampleBaseInfoVO;
    }
  });
};

// tab页签切换
const onHandleClick = (TabPaneName: string) => {
  activeName.value = TabPaneName;
};

// 基础信息按钮收缩事件
const onBaseInfo = () => {
  visible.value = true;
};

// 父组件拿到子组件干扰类型的值
const onInterferTypeValue = (value: string) => {
  interferType.value = value;
};

// 确认添加
const onConfireAdd = () => {
  $router.push({
    path: "/testSampleDataManageSystem/testSampleData",
    query: {},
  });
};

// 返回
const onBack = () => {
  sessionStorage.removeItem("baseInfoVO");
  if (route.query.pageType === 'dealLook') {
    $router.push({
      path: "/testSampleDataManageSystem/testSampleData",
      query: {},
    });
  } else {
    $router.push({
      path: "/testSampleDataManageSystem/testSampleData/layer",
      query: {
        layerType: "comparison",
        sampleId: route.query?.dealBeforeId,
        interType: route.query?.interType,
      },
    });
  }
};

// 关闭
const onClose = () => {
  visible.value = false;
};
</script>

<style lang="scss">
@import "@/assets/style/buttons";
@import "@/assets/style/tabs";
.test-sample-data-dialog {
  position: relative;
  .buttons-group {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
  }
  .upload-demo {
    margin: 0 10px;
  }

  .base-info-button {
    position: absolute;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.15);
    right: 80px;
    top: 15px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    color: rgb(1, 18, 90);
  }

  :deep() {
    .modalClass {
      position: absolute;
      right: 22px;
      top: -25px;
    }
    .el-dialog__header {
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      margin-bottom: 15px;
      padding-bottom: 10px;
      margin-right: 0px;
      padding: 10px;
    }
    .el-dialog__title {
      font-size: 15px;
      color: rgba(1, 18, 90, 1);
    }
    .el-dialog__headerbtn {
      top: -2px;
    }
    .el-dialog__body {
      padding: 0px;
    }
  }
}
</style>
